<template>
<div class="charcter">
<el-card class="box-card" shadow="hover">
  <!-- 标题 -->
  <div slot="header" class="clearfix" align="center">
    <h3>{{description.name}}</h3>
    <span>{{description.romaji}}</span>
  </div>
  <!-- 内容 -->
  <div class="container" align="center">
    <!-- 头像 -->
    <el-image class="yukino-icon" :src="description.icon"></el-image>
    <span>{{description.name}}</span>
    <el-divider></el-divider>
    <!-- 简介 -->
    <div class="yukino-details">
      <h3>简介</h3>
      <div class="content" align="left" v-html="description.content"></div>
    </div>
    <el-divider></el-divider>
    <!-- 语录 -->
    <div class="yukino-quotations">
      <h3>雪乃酱语录一览</h3>
      <div v-for="(item, index) in quotations" :key="index" class="yukino-quotation">
        <div class="yukino-symbol">“</div>
        <div class="yukino-quotation-content">{{ item.quotation }}</div>
        <div class="yukino-symbol">”</div>
      </div>
    </div>
  </div>
</el-card>
</div>
</template>
<script>
export default {
  name: 'yukinoCharcter',
  data () {
    return {
      description: {
        id: '',
        icon: '',
        name: '',
        romaji: '',
        content: '',
      },
      quotations: [
        { quotation: "请把你的人生交给我。" },
        { quotation: "总有一天会有喜欢比企谷君的昆虫出现吧。" },
        { quotation: "只要亲密的人理解我就好了，别人怎么想我无所谓。" },
        { quotation: "最低限度都没有做到的人，没有资格去羡慕有才能的人。无法成功的人正是因为想不到成功的人花费了多少心血，才无法成功的啊。" },
        { quotation: "只是为了铲除敌人而努力，那努力并非能提升自我，所以不能解决问题。" },
        { quotation: "人无完人。弱小丑陋会因为妒忌立刻去排挤别人，令人惊异的是，越优秀的人却活得越艰辛呢。这种事太不合道理了吧。所以我才要改变，包括人在内的这个世界。" },
        { quotation: "什么都创造不出来，什么都得不到，什么都给予不了，只不过是伪物。" },
        { quotation: "如果你只会吸气吐气的话，旁边的空调都比你有用多了。" },
        { quotation: "不要逃避现实，比企谷君。" },
        { quotation: "只有努力才能想出解决之道哦。	" },
        { quotation: "我认为，想要提高自我就应该挑战极限。" },
        { quotation: "人只要有容身之处，就不必化作星星，迎来燃烧殆尽的悲惨结局" },
        { quotation: "本来，我们就搞不懂对方在想什么。因为即使互相认识，也不见得就一定能互相理解" },
        { quotation: "人会把太过痛苦的记忆封印起来呢。" },
        { quotation: "什么都倾听和帮忙并不能解决问题。	" },
        { quotation: "没有依靠的话，也就找不到自己的容身之处。只好四处躲藏，被水冲走，随波逐流，撞向无形的墙壁。" },
        { quotation: "我虽然会妄言和失言，但我绝不虚言（我说过暴言和失言，但是从没说过虚言）。" },
        { quotation: "正因为察觉到自己劣于别人，才会有错觉被人看不起吧。	" },
        { quotation: "用考试的分数和名次来衡量一个人的价值才是愚蠢的行为。就算成绩再好，人品方面有缺陷的人也是有的。" },
        { quotation: "骚扰短信，那是践踏别人的尊严、最差劲的行为，不展示自己的姓名跟相貌，只为伤害别人恶意中伤，要阻止的话只有将其连根拔起才有效。" },
      ]
    }
  },
  methods: {
    getDescription () {
      let _this = this;
      this.$axios.get("/api/getDescription.php").then((res) => {
          _this.description = res.data[0];
          _this.description.icon = "http://localhost:80/yukino_img/" + _this.description.icon;
          console.log(_this.description.icon);
      })
    }
  },
  created() {
    this.getDescription();
  },
}
</script>
<style scoped>
.el-card {
  width: 60%;
  min-width: 600px;
  margin: 50px auto;
}
.el-card h3 {
  font-size: 22px;
}
.el-card span {
  font-size: 10px;
}
.container span {
  padding-top: 5px;
  display: block;
}
/* 头像 */
.yukino-icon {
  width: 300px;
  background: #f1f1f1;
  border: 1px solid #DCDFE6;
  border-radius: 5px;
}
/* 简介部分 */
.yukino-details {
  padding: 5px 0;
  width: 85%;
}
/* 简介标题 */
.yukino-details h3 {
  font-size: 22px;
  margin-bottom: 20px;
}
/* 语录收集部分 */
/* 特殊符 */
.yukino-quotation {
    display: table;
    margin: auto;
    background-color: transparent;
    width: auto;
    max-width: 85%;
}
.yukino-symbol {
    display: table-cell;
    vertical-align: top;
    color: #B2B7F2;
    font-size: 36px;
    font-family: 'Times New Roman',serif;
    font-weight: bold;
    text-align: left;
    padding: 10px;
    line-height: 100%;
}
.yukino-quotation-content {
  display: table-cell;
  text-align: left;
  padding: 1em;
  font-size: 17px;
  /* text-indent: 2em; */
  vertical-align: middle;
}
/* 分隔符 */
.el-divider {
  width: 85%;
}
</style>
<style>
p {
  text-indent: 2em;
  padding: 5px 0;
}
</style>